<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<link type="text/css" href="<%=basePath%>/css/oss/iot/monitor_device.css?<%=v%>" rel="stylesheet"/>
<style type="text/css">
	.red-span{
		background: #f44336;
	    padding: 2px 6px;
	    color: #fff;
	    border-radius: 4px;
	    cursor: pointer;
	}
	.span-dis{
		display: inline-block;width: 300px;text-align: left;margin-right: 100px;
		text-overflow: ellipsis;
		white-space: nowrap;overflow: hidden;
	}
	
	.blue-span{
		background: #3499da;
	    padding: 3px 6px;
	    color: #fff;
	    border-radius: 4px;
	}
	
	.blue-span{
		background: #3499da;
	    padding: 3px 6px;
	    color: #fff;
	    border-radius: 4px;
	}
	
	.grey-span{
		background: #aaa;
	    padding: 3px 6px;
	    color: #fff;
	    border-radius: 4px;
	    opacity: 0.9;
	}
	.time-span{
		color: #999894;
	}
</style>
</head>
<body>
	<div>
		<%@include file="moudle/header.jsp" %>
		<span class="active hide">monitor</span>
		<!--  下方部位  -->
		<div style="background: #ecf0f5;padding-top: 70px;">
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<ul class="dashboard-menu scoll">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="changeScene(this)" 
						<c:if test="${id !=null }">
							<c:if test="${obj.id ==id}">
						 	  class="active"
						   </c:if> 
						</c:if>
						<c:if test="${id ==null }">
							<c:if test="${status.index ==0}">
						 	 class="active"
						   </c:if> 
						</c:if>
						  sid="${obj.id}">
	                       <span class="icon-stack-overflow"></span>&nbsp;${obj.name }
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						
					</div>
				</div>
			</div>
			
			<div id="template0" class="hide">
				<div class="box join-device-box" >
					<div class="device_container" ><i class="icon-hdd-o"></i>&nbsp;
						<span style="width: 100px;display: inline-block;">{0}</span> &nbsp;&nbsp;&nbsp;<span> {1}</span>
						<span class="float-right red-span" style="margin-right:20px;" onclick="deviceSetting({4})" tag="{4}">设置参数</span>
						<span class="float-right span-dis" style="">设备号：{2}</span>
					</div>
					<div class="sensor_info_container">
						{3}
					</div>
				</div>
			</div>
			
			<!-- 连续型 -->
			<div id="template1" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/25.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
<!-- 					 	<p>当前状态：{1}</p> -->
					 	<span class="time-span" >更新时间：{2}</span>
					 </div>
					 <div class="x3">
					 	<span class="sensor-value">{3}</span>
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
			<!-- 开关 -->
			<div id="template2" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/27.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
<!-- 					 	<p>当前状态：{1}</p> -->
					 	<span class="time-span"  >更新时间：{2}</span>
					 </div>
					 <div class="x3">
					 	<img style="margin:15px 0 0 30px;cursor: pointer;" tag="{7}" onclick="switchSensor(this,{4},{5})" {3} >
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={6}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
			<!-- 三级开关 -->
			<div id="template4" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/27.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
<!-- 					 	<p>当前状态：{1}</p> -->
					 	<span class="time-span"  >更新时间：{2}</span>
					 </div>
					 <div class="x3">
					 		{3}
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
			<!-- 视频类型  -->
			<div id="template5" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/610.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
<!-- 					 	<p>当前状态：{1}</p> -->
					 	<span class="time-span"  >更新时间：{2}</span>
					 </div>
					 <div class="x3">
					 	{3}
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/video?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
			<!-- 离散 -->
			<div id="template3" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/26.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
<!-- 					 	<p>当前状态：{1}</p> -->
					 	<span class="time-span" >更新时间：{2}</span>
					 </div>
					 <div class="x3">
					 	<span class="sensor-value">{3}</span>
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
			<!-- 定位型 -->
			<div id="template6" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/{6}.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
<!-- 					 	<p>当前状态：{1}</p> -->
					 	<span class="time-span" >更新时间：{2}</span>
					 </div>
					 <div class="x3">
					 	<span style="font-size: 18px;" class="sensor-value">{3}</span>
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function changeScene(obj){
	$(".dashboard-menu li").removeClass("active");
	$(obj).addClass("active");
	reflash( $(".dashboard-menu li.active").attr("sid"));
}
/**
 * 控制
 */
 function switchSensor(obj,id,value){
	var obj = $(obj) ;
	var requestData = '',src='' ;
	if( obj.attr("src").indexOf("loading") >-1  ){
		return ;
	}
	var measure_type_value = obj.attr("tag");
	if(convertControl(value,measure_type_value,'打开')){
		requestData = convertControl(value,measure_type_value,'打开');
		src = "<%=basePath%>/image/oss/iot/off_loading.gif";
	}else if(convertControl(value,measure_type_value,'关闭')){
		requestData =convertControl(value,measure_type_value,'关闭') ;
		src = "<%=basePath%>/image/oss/iot/on_loading.gif" ;
	}else if(convertControl(value,measure_type_value,'开门成功')){
		requestData = convertControl(value,measure_type_value,'开门成功');
		src = "<%=basePath%>/image/oss/iot/off_loading.gif";
	}else if(convertControl(value,measure_type_value,'正常')){
		requestData = convertControl(value,measure_type_value,'正常');
		src = "<%=basePath%>/image/oss/iot/on_loading.gif";
	}
	obj.attr("src",src);
	commonAjax('PUT',localUrl+"/sensor/control/realtime/update", {id:id,request_sdata:requestData  },function(data){
		if(isOK(data)){
			obj.attr("src",src);
		}else{
			tip(data.statusMsg);
		}
	});
}
$(function(){
	
	reflash( $(".dashboard-menu li.active").attr("sid"));
	// getVideoInfo($(".dashboard-menu li.active").attr("sid"));
	setInterval(function(){
		reflash( $(".dashboard-menu li.active").attr("sid"));
	},3000);
	
})
// 刷新传感器数据
function reflash(sid){
	postAjax(localUrl+"/page/node/sensor/list.json", {scene_id:sid, node_data_type:0 },function(data){
		$(".sceneList-info").empty();
		if(isOK(data)){
			var dataObj = data.data ;
			for(var i=0; i <dataObj.length;i++){
				$(".sceneList-info").append($("#template0").html().format( dataObj[i].name ,
						nodeStatusInfo(dataObj[i].iot_node_status ,dataObj[i].data.iot_node_status) ,dataObj[i].device_code,getSensorListHtml(dataObj[i].iotSensorList,sid),dataObj[i].id ) );
			}
		}
	});
}

function getSensorListHtml(dataT,sid){
	var str = '' ;
	var src1 = 'src="<%=basePath%>/image/oss/iot/on.png"';
	var src2 = 'src="<%=basePath%>/image/oss/iot/off.png"';
	for(var i=0;i<dataT.length;i++){
		if( dataT[i].iot_sensor_type == 25 ){
			str+=$("#template1").html().format(disvalue(dataT[i].name,9),
							dataT[i].data.iot_sensor_status,
							timeStamp2String(dataT[i].mtime,'yy-MM-dd hh:mm:ss'),
							 gdv(dataT[i].sdata,0)+" "+dataT[i].data.measure_unit_type,dataT[i].id,sid);
		}else if( dataT[i].iot_sensor_type == 26 ){
			str+=$("#template3").html().format(disvalue(dataT[i].name,9),
					dataT[i].data.iot_sensor_status,
							timeStamp2String(dataT[i].mtime,'yy-MM-dd hh:mm:ss'),
							gdv(dataT[i].data.measure_unit_type,'-'),dataT[i].id,sid);
		}else if( dataT[i].iot_sensor_type == 27  ){
			str+=$("#template2").html().format(disvalue(dataT[i].name,9),
					dataT[i].data.iot_sensor_status,
					timeStamp2String(dataT[i].mtime,'yy-MM-dd hh:mm:ss'),
					tom(convertControl( dataT[i].sdata,dataT[i].data.measure_unit_type_value,'打开'),src1,src2 ),dataT[i].id,dataT[i].sdata,sid,dataT[i].data.measure_unit_type_value );
		}else if(dataT[i].iot_sensor_type == 90 ){
			// gps定位数据
			str+=$("#template6").html().format(disvalue(dataT[i].name,9),
					dataT[i].data.iot_sensor_status,
							timeStamp2String(dataT[i].mtime,'yy-MM-dd hh:mm:ss'),
							gdv(dataT[i].str_sdata,'-'),dataT[i].id,sid,609);
		}else if(dataT[i].iot_sensor_type == 98 ){
			// gps定位数据
			str+=$("#template6").html().format(disvalue(dataT[i].name,9),
					dataT[i].data.iot_sensor_status,
							timeStamp2String(dataT[i].mtime,'yy-MM-dd hh:mm:ss'),
							gdv(dataT[i].str_sdata,dataT[i].sdata),dataT[i].id,sid,234005);
		}
	}
	if( validater.empty(str) ){
		str = "<p style='color:#aaa;text-align:center;'>暂无设备传感点</p>"
	}
	return str ;
}

function getMoreSwitch(data,dataType,sensor_id){
	var html = '' ;
	var str = dataType.split(",");
	for(var o =0;o<str.length; o++){
		var tmp = str[o].split(":");
		if(tmp[0] == data ){
			html += '<button type="button" onclick="change(this,'+tmp[0]+','+ sensor_id +')" class="button border-sub active">'+tmp[1]+'</button>' ;
		}else{
			html += '<button type="button" onclick="change(this,'+tmp[0]+','+sensor_id+')" class="button border-sub ">'+tmp[1]+'</button>' ;
		}
	}
	var butn = 
	'<div class="button-group button-group-small" style="margin-top:15px;" >'+ 
		html+
	'</div>' ;
	return butn ;
}

function nodeStatusInfo(code,value){
	if(code == 16){
		return "<span class='blue-span'>"+value+"</span>" ;
	}else{
		return "<span class='red-span'>"+value+"</span>" ;
	}
}

function getVideoInfo(sid){
	postAjax(localUrl+"/page/video.json?pageSize=300&paged=1", {scene_id:sid},function(data){
		$(".video_container").empty();
		if(isOK(data)){
			$(".video-box-container").show();
			var dataT = data.data.data ;
			dataCache = dataT ;
			for(var i=0;i<dataT.length;i++){
				$(".video_container").append(
						$("#template5").html().format(disvalue(dataT[i].name,7),
								dataT[i].data.status,
								timeStamp2String(dataT[i].atime,'yy/MM/dd hh:mm:ss'),
								 "",dataT[i].id,sid));
			}
		}else{
			$(".video-box-container").hide();
		}
	});
}

function change(obj,data,sensor_id){
	layer.load(2);	
	setTimeout(function() {
		layer.closeAll();
		commonAjax('PUT',localUrl+"/sensor/control/realtime/update", {id: sensor_id ,request_sdata: data  },function(data){
			if(isOK(data)){
				
			}else{
				tip(data.statusMsg);
			}
		});
	}, 500);
}

function deviceSetting(node_id){
	layer.open({
		  type: 2,
		  title: '设备参数配置',
		  area: ['730px', '460px'],
		  shade: 0.1,
		  closeBtn: 1,
		  shadeClose: true,
		  content: localUrl+"/iot/device_setting?id="+node_id
	});
}
</script>
</html>